import React, {
	Component
} from 'react';
import {
	observer,
} from 'mobx-react';
import {
	Flex,
	WingBlank,
} from 'weaver-mobile';
import {
	Route,
	withRouter,
} from 'react-router-dom';
import Details from "./Details.js";

@withRouter
@observer
export default class Absence extends Component {
	handleClick = (item) =>{
		const {
			store,
			history,
		} = this.props, {
			loadKqDetailInfo,
			resetKqDetail,
			absenceLayout,
			setKqType,
		} = store;

		resetKqDetail();
		setKqType(item.type);
		history.push(absenceLayout.path);
		loadKqDetailInfo({
			isScroll: false,
			type: "detail"
		});
	}

	render() {
		const {
			store,
			history,
		} = this.props, {
			detail,
			absenceLayout,
		} = store;

		return (
			<WingBlank>
				<div className="attendance-details">
					{
						detail.map(item => {
							const {
								title,
								value,
								type
							} = item;

							return (
								<div key={type} className={`attendance-details-brief item-padding ${(detail.length < 3) ? 'flexGrow' : ''}`} onClick={ () => (parseFloat(value) > 0) && this.handleClick(item)}>
									<div className={(parseFloat(value) === 0) ? "disabled-item ": ''}>{value}</div>
									<div>{title}</div>
								</div>
							)

						})
					}
				</div>
				<Route key={absenceLayout.id} path={absenceLayout.path} render={() => <Details store={store} isPresentSearch={false} history={history} type="absence"/>}/>
			</WingBlank>
		)
		
	}
}
